<template>
  <div>
    <a-row>
      <a-col :span="6">
        <div class="fxBox mb10">
          <!-- <Prompter :onLine="20" :offLine="4" :all="dataLists.total"></Prompter> -->
        </div>
        <!-- @search="onSearch" -->
        <a-input-search class="mb10" placeholder="设备名称搜索" @search="onSearch" enterButton />
        <div style="height:680px; overflow: auto;">
        <a-list class="leftList" itemLayout="horizontal" :pagination="false" :dataSource="dataLists.data">
          <a-list-item style="padding-left:5px;padding-right:5px;" :class="index === active ? 'videoLists on' : 'videoLists'"
            @click="getVideo(item, index)" slot="renderItem" slot-scope="item, index">
            <a-list-item-meta :description="item.group_name">
              <span slot="title">{{item.name}}</span>
              <a-icon slot="avatar" v-if="item.status == '在线'" title="在线" theme="filled" style="fontSize: 24px; color: #52c41a;" type="check-circle" />
                <a-icon slot="avatar" v-else title="离线" theme="filled" style="fontSize: 24px;color: #fe5d58;" type="exclamation-circle" />
            </a-list-item-meta>
            <div>
              <a-icon type="right" />
            </div>
          </a-list-item>
        </a-list>
        </div>
        <div class="pageBox" style="position: relative;bottom: 0;">
          <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
            :defaultCurrent="1" @change="pageChange" />
        </div>
      </a-col>
      <a-col :span="18">
         <!-- column: 2 -->
        <a-list style="height: 800px;overflow: auto;border: 1px solid #ccc;" class="content" :grid="{ gutter: 16, md: 1, xl: 2, xxl: 3}"
          :locale="{ emptyText: '无摄像头' }" :dataSource="videoList" :rowKey="record => record.id">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card class="videoLists">
              <h3>{{item.name}}</h3>
              <div :id="`videoBox${item.id}`" class="videoright">
                <video style="width: 100%;height:100%;" :id='`my-video-${item.id}`' :ref="`my-video-${item.id}`" :key="item.id" class="video-js vjs-default-skin" controls preload="metadata">
                  <source :src="item.hls_url" type="application/x-mpegURL">
                </video>
              </div>
            </a-card>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import Prompter from '@C/Prompter/'; //提示器
  import 'video.js/dist/video-js.css'
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
  export default {
    name: "Video",
    components: {
      Prompter
    },
    beforeDestroy() {
      //退出当前路由前清除videojs创建的视频，否则会一直请求m3u8
      this.videoListArr.forEach(item=>{
        item.dispose()
      })
    },
    data() {
      return {
        videoModal: false,
        videoList: [],
        active: '',
        hlsUrl: '',
        myPlayer: '',
        videoListArr: [],
        formList: {
          page: 1,
        }
      }
    },
    mounted() {
      // this.isOnLine()
      this.changeData()
    },
    computed: {
    	...mapState({
    		dataLists: state => state.equipmentVideo.dataVideoLists,
    		isOnLineData: state => state.equipment.isOnLineData,
    	}),
    },
    methods: {
      /* 通用模块 */
        /* 接口 */
      ...mapActions({
        getLists: 'equipmentVideo/getVideoLists',     //列表
        isOnLine: 'equipment/isOnLine',     //设备在线状态
      }),
        // 勾选
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
      },
        // 重新获取列表数据
      changeData(){
        this.tableLoad = true
        setTimeout(()=> {
          this.getLists(this.formList)
          this.tableLoad = false
        }, 800);
      },
        //搜索
      onSearch(val) {
        this.formList = {
          name: val,
        	page: 1
        }
        this.changeData()
      },
        // 页码
      pageChange(page) {
      	this.formList.page = page;
      	this.getLists(this.formList)
      },
      /* 通用模块end */

      //显示点击的当前视频
      getVideo(item, index) {
        this.active = index
        this.videoList = item.video
        this.$nextTick(()=>{
          // this.videoListArr = []
          item.video.forEach((videoitem,i)=>{
            if(typeof(this.$refs[`my-video-${videoitem.id}`]) != "undefined") {
              let myPlayer = videojs(`my-video-${videoitem.id}`);
              myPlayer.dispose()
              let videohtml = `
                <video style="width: 100%;height:100%;" id='my-video-${videoitem.id}' ref="my-video-${videoitem.id}" key="${videoitem.id}" class="video-js vjs-default-skin" controls preload="metadata">
                   <source src="${videoitem.hls_url}" type="application/x-mpegURL">
                 </video>
              `
              document.querySelector(`#videoBox${videoitem.id}`).innerHTML = videohtml  //无奈-。- ，low死了
              this.myPlayer = videojs(`my-video-${videoitem.id}`, {
                bigPlayButton: false,
                textTrackDisplay: false,
                posterImage: true,
                errorDisplay: false,
                controlBar: true,
              }, function() {
                // this.play()
              });
              this.videoListArr.push(this.myPlayer)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

  .leftList >>> .ant-list-item-content {
    flex: initial !important
  }

  >>> .video-js {
    display: block;
    width: 100%;
    height: 0;
    max-height: 225px;
    min-height: 167px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background-color: #fff;
    position: relative;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    word-break: initial;
  }
  .videoLists {
    cursor: pointer;
  }
  .videoright {
    width: 100%;
  }
  .videoLists:hover,
  .on {
    background: #d4eaff;
  }
</style>
